<template>
	<view>
		<!-- 状态栏 -->
		<view v-if="showHeader" class="status"
			:style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view>

		<!-- 收藏提示 -->


		<!-- 		<tips ref="tips" /> -->


		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(swiper, index) in swiperList" :key="index">
						<image :src="swiper.content" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view class="dots" v-for="(swiper, index) in swiperList"
						:class="[currentSwiper == index ? 'on' : '']" :key="index"></view>
				</view>
			</view>
		</view>

		<!-- 人员姓名 -->
		<view class="name-box">

			<!-- 		<view class="name">
				<view class="name-text">HI,{{userName}}</view>
				<view class="tips">欢迎来到衣之光回收</view>
			</view> -->

			<view class="city">
				<image src="/static/img/dttb.png"></image>
				<text>当前位置：{{city}}</text>
			</view>

		</view>

		<!-- 快捷功能 -->
		<!-- 	<view class="shortcut">
			<view class="shortcut-1">
				<view class="title">
					上门<br>
					回收
				</view>
				<image :src='this.commonImg() + "shortcut-1.jpg"' mode=""></image>
			</view>
			<view class="shortcut-2">
				<view class="title">
					回收<br>
					分类
				</view>

				<image :src='this.commonImg() + "shortcut-2.jpg"' mode=""></image>
			</view>
		</view> -->


		<!-- 分类列表 -->
		<view class="category-list">
			<view class="title">
				<view class="bt"></view>
				<view class="price">
					今日回收参考价格
					<text>{{price}}元/KG</text>
				</view>
			</view>
			<view class="info">
				<view class="category" v-for="(row, index) in categoryList" :key="index" @click="category(row.url)">
					<view class="img" :style="{background:row.bg}">
						<image :src="row.thumb"></image>
					</view>
					<view class="text">{{row.name }}</view>
					<view class="new" v-if="row.new">新</view>
				</view>
			</view>

			<view class="banner" @tap="toadd()">
				<image :src='this.commonImg() + "advert-1.png"'></image>
				<image :src='this.commonImg() + "go.png"' class="go"></image>
			</view>
			<!-- 通知 -->
			<view class="notice_top">
				<view class="notice">
					<image class="tongzhi" :src='this.commonImg() + "notice.png"'></image>
					<swiper class="swiper-nav" :circular="true" vertical="true" :autoplay="true" :interval="3000"
						:duration="1000">
						<swiper-item style="display: table;" v-for="(item,index) in newList" :key="index">
							<view class="right">
								<text v-if="item.title">{{item.title}} 预约旧衣回收成功</text>
								<text v-else>{{item.title}} 预约旧衣回收成功</text>
								<text>{{item.create_time}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 回收指南 -->
		<view class="process">
			<view class="title">
				<image :src="this.commonImg()+'recycle.png'" mode="aspectFit"></image>回收指南
			</view>
			<view class="subheading">简单4步，轻松搞定，环保从你我做起</view>
			<view class="process-img">
				<image :src='this.commonImg() + "liucheng2.png"' mode="aspectFit"></image>
				<view class="nr">
					<text>手机预约</text>
					<text>免费上门</text>
					<text>&nbsp;&nbsp;&nbsp;回收运输</text>
					<text>按量返现</text>
				</view>
			</view>
		</view>



		<view class="actuality">
			<view class="title">热门活动</view>


			<view class="nr">

				<view class="item" style="background: #ffebeb;" @click="todistribution()">
					<image :src='this.commonImg() + "sever-1.png"'>
						<view class="text">
							<text style="color: #fe5570;">邀请好友</text>
							<text class="en" style="color: #ff879a;">邀请立领现金红包</text>
						</view>
				</view>

				<view class="item" style="background: #e3f0ff;" @click="toaddindex()">
					<image :src='this.commonImg() + "sever-2.png"'>
						<view class="text">
							<text style="color: #0b77ff;">入驻衣之光</text>
							<text class="en" style="color: #4c9afc;">超高返现持续收益</text>
						</view>
				</view>


			</view>
		</view>


		<view class="actuality">
			<view class="title">精彩服务</view>
			<view class="nr">
			
				
				<view class="item" style="background: #d8f4ee;" @click="severBtn(2)">
					<view class="bubble-left flash animated infinite">新</view>
					<image :src='this.commonImg() + "category-7.png"'>
						<view class="text">
							<text style="color: #01c3a3;">家电回收</text>
							<text class="en" style="color: #6dbcaf;">上门回收家电</text>
						</view>
				</view>
				<view class="item" style="background: #ffebeb;" @click="severBtn(1)">
					<image :src='this.commonImg() + "category-1.png"'>
						<view class="text">
							<text style="color: #fe5570;">旧衣回收</text>
							<text class="en" style="color: #ff879a;">上门回收旧衣服</text>
						</view>
				</view>


				<!-- 			<view class="item" style="background: #ffefcf;" @click="severBtn(1)">
					<image :src='this.commonImg() + "category-5.png"'>
						<view class="text">
							<text style="color: #fa8a0c">书籍回收</text>
							<text class="en" style="color: #f8c081;">上门回收书籍</text>
						</view>
				</view>



						<view class="item" style="background: #e3f0ff;" @click="severBtn(3)">
					<image :src='this.commonImg() + "category-6.png"'>
						<view class="text">
							<text style="color: #0b77ff;">手机回收</text>
							<text class="en" style="color: #4c9afc;">上门回手机</text>
						</view>
				</view>


						<view class="item" style="background: #ffebeb;" @click="severBtn(4)">
					<image :src='this.commonImg() + "sever-5.png"'>
						<view class="text">
							<text style="color: #fe5570;">家具清运</text>
							<text class="en" style="color: #ff879a;">上门清理运送家具</text>
						</view>
				</view> -->

			</view>
		</view>




		<view class="actuality">
			<view class="title">助力公益</view>
			<swiper circular="true" autoplay="true" @change="swiperChange1">
				<swiper-item v-for="(swiper, index) in benefit" :key="index">
					<image :src="swiper.content" mode="aspectFill" @click="welfare(index)"></image>
					<!-- <text class="text">助力公益</text> -->
					<text class="tips">{{swiper.tips}}</text>
				</swiper-item>
			</swiper>
			<view class="indicator">
				<view class="dots" v-for="(swiper, index) in benefit" :class="[currentSwiper1 == index ? 'on' : '']"
					:key="index"></view>
			</view>
			<!-- 
					<view class="nr">
						<view class="item">
							<image :src='this.commonImg() + "zt3.jpg"'>
								<view class="text">
									<text>资源浪费</text>
									<text class="en">Waste</text>
								</view>
						</view>
						<view class="item">
							<image :src='this.commonImg() + "zt2.jpg"'>
								<view class="text">
									<text>污染环境</text>
									<text class="en">Pollute</text>
								</view>
						</view>
						<view class="item">
							<image :src='this.commonImg() + "zt1.jpg"'>
								<view class="text">
									<text>供大于求</text>
									<text class="en">Demand</text>
								</view>
						</view>
					</view> -->
		</view>


		<view class="center">
			<!-- 	<view class="advantage">
				<view class="li">
					<image src="/static/img/icon_dg.png"></image>
					<text>高价回收旧衣</text>
				</view>
				<view class="li">
					<image src="/static/img/icon_dg.png"></image>
					<text>覆盖300+城市</text>
				</view>
				<view class="li">
					<image src="/static/img/icon_dg.png"></image>
					<text>快递免费上门</text>
				</view>
			</view> -->
			<!-- 快捷导航 -->
			<view class="title">环保小常识</view>
			<view class="navigation">

				<view class="left">
					<image :src='this.commonImg() + "/news-1.png"'></image>
					<view style="width: 80%;">
						<text class="bt">环保再生</text>
						<text class="ms">
							再生环保通过推行循环经济理念，建立废弃物回收体系，将废弃物变废为宝。
						</text>
					</view>

				</view>


			</view>

			<view class="navigation">
				<view class="left">
					<image :src='this.commonImg() + "/news-3.png"'></image>
					<view style="width: 80%;">
						<text class="bt">旧衣出口</text>
						<text class="ms">
							衣之光出口到非洲的旧衣服品质优良、价格实惠，深受当地消费者喜爱。
						</text>

					</view>

				</view>
			</view>


			<view class="navigation">
				<view class="left">
					<image :src='this.commonImg() + "/news-2.png"'></image>
					<view style="width: 80%;">
						<text class="bt">爱心捐赠</text>
						<text class="ms">
							部分衣之光旧衣服也会通过捐赠和慈善活动送到非洲。
						</text>

					</view>

				</view>
			</view>
		</view>
		<!-- ok  -->
		<!-- 	<view class="problem">
			<view class="title">常见问题</view>
			<view class="list">
				<uni-collapse ref="collapse">
					<uni-collapse-item v-for="(row, index) in problemList" :key="index" thumb="/static/img/q.png"
						:title="row.title">
						<view class="content">
							<view class="text">
								<rich-text :nodes="row.content"></rich-text>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view> -->

		<view class="problem">
			<view class="title" style="margin-left: 30rpx;">合作伙伴</view>
			<view class="partners">
				<image src="/static/img/kd4.jpg" mode="widthFix"></image>
				<image src="/static/img/kd5.jpg" mode="widthFix"></image>
				<image src="/static/img/kd6.jpg" mode="widthFix"></image>
			</view>
		</view>

		<view class="right_nav right_nav1">
			<image class="kefu" src="/static/img/yuepay.png" @click="todistribution()"></image>
			<text class="kefu-text">邀请有奖</text>
		</view>

		<view class="right_nav">
			<image class="kefu" :src='this.commonImg() + "kefu.png"' @click="tokefu()"></image>
			<text class="kefu-text">在线客服</text>
		</view>
		<view class="footer" @click="totel()">
			<text class="tel">合作热线：400-889-2875</text>
		</view>

		<wxlogin v-if="Shouq" :code='code'></wxlogin>
		<view class="block"></view>
		<custom-tab-bar :selected="0" />


		<!-- 	<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHhrgz1"></view> -->
		<!-- 	<view class="modal-dialog" v-if="isHhrgz1">
			<view class="modal-content">
				<view class="title">隐私政策协议</view>
				<view class="modal-text">
					请你务必审慎阅读、充分理解<text @click="agreement(1)">“隐私政策”</text>和<text
						@click="agreement(2)">“服务协议”</text>各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。
				</view>
				<button @tap="toclose1()">
					确认
				</button>
			</view>
		</view> -->

	</view>

</template>

<script>
	import amap from '@/common/SDK/amap-uni.js';
	import wxlogin from "@/components/wxlogin";
	import tips from '@/components/S-Tips/Tips'
	import customTabBar from "@/components/customTabBar/index.vue"
	var _self,
		page = 1,
		timer = null;
	export default {
		components: {
			wxlogin,
			tips,
			customTabBar
		},
		data() {
			return {
				showHeader: true,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				statusTop: null,
				currentSwiper: 0,
				currentSwiper1: 0,
				pageHome: [],
				swiperList: [],
				isHhrgz1: true,
				benefit: [{
						id: 1,
						content: this.commonImg() + "/benefit-1.jpg",
						tips: '“衣”生万物·衣之光公益同行第一期--毛孩子救助计划X繁昌流浪狗救助站 '
					},
					{
						id: 2,
						content: this.commonImg() + "/benefit-2.png",
						tips: '对于质量较好、较新的夏装经过清洗消毒,交给相关外贸公司运送到非洲一些贫困或战乱国家。'
					},
					{
						id: 3,
						content: this.commonImg() + "/benefit-3.png",
						tips: '对于不能再穿的棉毛、棉纶、涤纶类等旧衣物交给环保再生工厂,制作成环保再生材料。'
					},
				],
				categoryList: [{
						id: 2,
						name: '旧衣物',
						thumb: this.commonImg() + "/category-1.png",
						url: '/pages/tabBar/order/add',
						bg: '#ffebeb'
					},
					{
						id: 3,
						name: '旧家电',
						thumb: this.commonImg() + "/category-7.png",
						url: '/packagePages/tabBar/appliances/add',
						bg: '#d8f4ee',
						new:true
					},
					{
						id: 4,
						name: '旧数码',
						thumb:this.commonImg() + "/category-6.png",
						url: '/packagePages/tabBar/appliances/add',
						bg: '#e3f0ff'
					},
					{
						id: 5,
						name: '旧四件套',
						thumb: this.commonImg() + "/category-4.png",
						url: '/pages/tabBar/order/add',
						bg: '#d8f4ee'
					},

				],
				
				// typeList: [{
				// 	name: '旧衣物',
				// 	img: this.commonImg() + "/category-1.png",
				// 	sort: '1',
				// 	bg: '#ffebeb',
				// 	num: 1
				// }, {
				// 	name: '旧书籍',
				// 	img: this.commonImg() + "/category-5.png",
				// 	sort: '2',
				// 	bg: '#ffefcf',
				// 	num: 2
				// }, {
				// 	name: '旧数码',
				// 	img: this.commonImg() + "/category-6.png",
				// 	sort: '3',
				// 	bg: '#e3f0ff',
				// 	num: 3
				// }, {
				// 	name: '旧家电',
				// 	img: this.commonImg() + "/category-7.png",
				// 	sort: '4',
				// 	bg: '#d8f4ee',
				// 	num: 4
				// }, ],
				
				newList: [{
					title: '衣之光正式上线啦！'
				}],
				Shouq: false,
				code: '',
				index: 0,
				koy: '',
				user_type: '',
				city: '',
				adcode: '',
				price: '',
				problemList: [],
				token: '',
				userName: ''
			};
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onShow() {
			this.token = uni.getStorageSync("token");

			// if (!this.token) {
			// 	this.toLogin()
			// }


			this.$api.http.get('common-page', {}).then(res => {
				if (res) {
					this.problemList = res.data.aid.desc;
					this.newList = res.data.notice;
					this.swiperList = res.data.banner.desc;
					this.swiperList[0].path = '/pages/tabBar/order/add'
					this.swiperList[1].path = '/pages/add/index'
					this.swiperList[2].path = '/packagePages/tabBar/appliances/add'
				}
			})
		},
		onLoad(option) {
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			let that = this
			if (option.pid) {
				uni.setStorageSync("share_pid", option.pid);
			}
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: (res) => {
					const latitude = res.latitude;
					const longitude = res.longitude;
					uni.request({
						header: {
							"Content-Type": "application/text"
						},
						//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
						url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' + res
							.longitude + ',' + res.latitude +
							'&key=cddad68c5f2d97f1078b7623def84a68&radius=1000&extensions=all',
						success(re) {
							if (re.statusCode === 200) {
								that.city = re.data.regeocode.addressComponent.district
								that.adcode = re.data.regeocode.addressComponent.adcode
								that.$api.http.get('common-region-price', {
									code: that.adcode
								}).then(res => {
									if (res) {
										that.price = res.data.price;
									}
								})
							} else {
								console.log("获取信息失败，请重试！")
							}
						}
					});
				}
			});
		},
		// onHide() {
		// 	this.$refs.tips.closeTips()
		// },
		methods: {

			agreement(type) {
				let url = ''
				let title = ''
				if (type === 1) {
					url = 'https://master.lemaohuishou.com/image/token/privacy-agreement.html'
					title = '隐私政策'
				} else {
					url = 'https://master.lemaohuishou.com/image/token/service-agreement.html'
					title = '服务协议'
				}

				uni.navigateTo({
					url: '/pages/webview/webview?url=' + url + '&title=' + title
				})
			},

			toclose1() {
				this.isHhrgz1 = false
			},

			welfare(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '../../../packagePages/tabBar/order/maogou'
					})
				}
			},

			toLogin() {
				uni.showToast({
					title: '请登录',
					icon: "none"
				});

				uni.setStorageSync("path", '/pages/tabBar/home/home')

				setTimeout(() => {
					uni.navigateTo({
						url: '../../login/login'
					})
				}, 700)
			},
			toSwiper(e) {
				if (e.id == 1) {
					uni.switchTab({
						url: e.path
					})
				} else {
					uni.navigateTo({
						url: e.path
					})
				}
			},
			tokefu() {
				uni.navigateTo({
					url: "/pages/kefu/index"
				})
			},
			toaddindex() {
				uni.navigateTo({
					url: "/pages/add/index"
				})
			},
			totel() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '400-889-2875',
					// 成功回调
					success: (res) => {},
					// 失败回调
					fail: (res) => {}
				});
			},

			bindPickerChanges: function(e) {
				this.index = e.detail.value
			},
			toadd() {
				uni.switchTab({
					url: '/pages/tabBar/order/add'
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//轮播图指示器
			swiperChange1(event) {
				this.currentSwiper1 = event.detail.current;
			},

			onShareAppMessage: function() {
				return {
					"title": '衣之光回收'
				}
			},
			onShareTimeline: function() {
				return {
					"title": '衣之光回收'
				}
			},
			todistribution() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/distribution2/index'
					})
				} else {
					this.toLogin();
				}
			},
			category(url) {
				if(url==='/pages/tabBar/order/add'){
					uni.switchTab({
						url: '/pages/tabBar/order/add'
					});
				}else{
					uni.navigateTo({
						url: url
					})
				}
				
				
			},
			severBtn(type) {
				switch (type) {
					case 1:
						uni.switchTab({
							url: '/pages/tabBar/order/add'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/packagePages/tabBar/appliances/add'
						})
						break;
					default:
						uni.showToast({
							title: '敬请期待~',
							icon: "none"
						});
						break;
				}




			}

		}
	};
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #f8f8f8;
	}

	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.title {
		font-size: 33rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		text-align: left;
	}


	.animated {
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both
	}

	.animated.infinite {
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite
	}

	.flash {
		-webkit-animation-name: flash;
		animation-name: flash
	}

	@-webkit-keyframes flash {

		/*只用修改这里就可以实现不同动画。例如大小闪烁transform: scale(.9);*/
		0%,
		100%,
		50% {
			opacity: 1;
			transform: scale(1);
		}

		25%,
		75% {
			opacity: 0.7;
			transform: scale(.9);
		}
	}

	@keyframes flash {

		0%,
		100%,
		50% {
			opacity: 1;
			transform: scale(1);
		}

		25%,
		75% {
			opacity: 0.4;
			transform: scale(.9);
		}
	}


	.bubble-left {
		position: absolute;
		height: 30rpx;
		display: table;
		padding: 7rpx 14rpx;
		line-height: 30rpx;
		border-radius: 20rpx;
		background-color: #FB6B50;
		font-size: 20rpx;
		color: #fff;
		right: -20rpx;
		z-index: 20;
		top: -20rpx;
		// &::after {
		// 	position: absolute;
		// 	left: -16rpx;
		// 	bottom: 16rpx;
		// 	content: '';
		// 	border: 4px solid transparent;
		// 	border-left-color: #ff2d49;
		// 	transform: rotate(180deg);
		// }

	}


	.block {
		height: 130rpx;
	}

	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 72%;
		position: fixed;
		top: 25%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.modal-text {
		overflow: auto;
		text-indent: 40rpx;

		text {
			color: #3bc7b3;
			text-decoration: underline;
		}
	}

	.modal-content {
		text-align: center;
		line-height: 20rpx;
		padding: 40rpx;
		font-size: 16rpx;


		.code {
			width: 100%;
		}

		.tishi {
			font-size: 28rpx;
			text-align: center;
		}

		.title {
			font-weight: bold;
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.show {
			width: 300rpx;
			height: 105rpx;
			display: block;
			margin: 50rpx auto 30rpx;
			z-index: 10000;
		}

		view {
			font-size: 22rpx;
			color: #333333;
			margin-bottom: 10rpx;
			line-height: 1.5;
		}

		view.bold {
			font-weight: bold;
		}

		button {
			width: 85%;
			height: 75rpx;
			line-height: 75rpx;
			border-radius: 60rpx;
			margin: 36rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background: linear-gradient(135deg, #42d09d, #3bc7b3);
			padding: 0;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: space-between;

			button {
				margin: 36rpx 0 0;
				width: 48%;
				border: 1px solid #21A56C;
			}

			.close {
				background: #fff;
				color: #21A56C;
			}
		}
	}


	.shortcut {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin: 30rpx;
		margin-top: 90rpx;
		margin-bottom: 40rpx;

		.shortcut-1,
		.shortcut-2 {
			width: 50%;
			height: 150rpx;
			background: #4d82fe;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-right: 30rpx;
			border-radius: 35rpx;
			position: relative;
		}

		.shortcut-2 {
			margin-right: 0;
			background: #3cbdc5;
		}

		.title {
			margin-left: 40rpx;
			margin-bottom: 0;
			font-weight: 0;
			font-size: 33rpx;
			line-height: 50rpx;
		}

		image {
			width: 170rpx;
			height: 190rpx;
			z-index: 10;
			position: absolute;
			right: 20rpx;
			top: -60rpx;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 999;
		background-color: #41cccf;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.name-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		left: 5rpx;
		top: 10rpx;
		background: rgba(0, 0, 0, 0.2);
		z-index: 10;
		border-radius: 10rpx;

		.name {
			padding: 30rpx 10rpx;
			padding-left: 20rpx;

			.name-text {
				font-weight: bold;
				font-size: 40rpx;
				margin-bottom: 20rpx;
			}

			.tips {
				color: #a9acb6;
			}

		}

		.city {

			display: flex;
			align-items: center;
			padding: 5px 10px;
			padding-right: 20rpx;
			border-radius: 7px;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			text {
				font-size: 22rpx;
				padding-left: 10rpx;
				color: #fff;
			}
		}
	}

	.top {
		width: 100%;
		z-index: 999;
		position: relative;

		.bjt {
			image {
				width: 100%;
				display: block;
			}
		}

		.input-box {
			width: 92%;
			height: 70rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			z-index: 9;
			position: relative;
			margin: 0 auto 30rpx;

			picker {
				width: 110rpx;
				height: 70rpx;
				font-size: 24rpx;
				color: #000;
				background: rgba(255, 255, 255, 0.5);
				z-index: 999;
				line-height: 70rpx;
				padding: 0 15rpx;
				margin-right: 20rpx;

				.uni-input {
					float: left;
				}

				.icon {
					float: right;
					font-size: 30rpx;
					color: #000000;
					font-weight: bold;
				}
			}


			.icon.search {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 70rpx;
				height: 70rpx;
				font-size: 34rpx;
				color: #000;
				background: #fff;
				justify-content: center;
				border-radius: 0 10rpx 10rpx 0;
				z-index: 999;
			}

			input {
				padding: 0 28rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				background: rgba(255, 255, 255, 0.5);
				width: 100%;
				border-radius: 10rpx;
			}
		}


	}

	.swiper {
		width: 100%;
		margin-bottom: 20rpx;
		position: relative;

		.swiper-box {
			width: 100%;
			height: 400rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;
			border-radius: 0 0 50% 50%/10%;
			box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);

			swiper {
				width: 100%;
				height: 400rpx;

				swiper-item {
					image {
						width: 100%;
						height: 400rpx;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 40upx;
				right: 20upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
					background-color: rgba(255, 255, 255, 0.5);
					transition: all 0.3s ease-out;
					margin: 0 10rpx;

					&.on {
						width: 50rpx;
						border-radius: 10rpx;
						background-color: rgba(255, 255, 255, 1);
					}
				}
			}
		}
	}

	.banner {
		margin: 0 auto;
		position: relative;
		text-align: center;

		image {
			width: 92%;
			height: 290rpx;
			display: block;
			margin: -50rpx auto -60rpx;
		}

		.go {
			width: 100rpx;
			height: 98rpx;
			position: absolute;
			right: 60rpx;
			top: 117rpx;
			animation: zoomInOut 2s infinite;
			/* 动画名称，每次动画持续2秒，并且无限循环 */
		}
	}


	/* 定义放大缩小动画 */
	@keyframes zoomInOut {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
			/* 放大1.5倍 */
		}
	}

	.category-list {
		background: #fff;
		width: 92%;
		margin: 30rpx auto;
		padding: 30rpx 0;
		padding-top: 50rpx;
		box-sizing: border-box;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		margin-top: -40rpx;
		padding-bottom: 0;
		
		.title {
			display: flex;
			justify-content: space-between;

			.bt {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
				text-align: left;
			}

			.price {
				color: #999;
				font-weight: normal;
				font-size: 24rpx;
				margin-right: 20rpx;

				text {
					color: #fff;
					background: #FB6B50;
					border-radius: 10px 0 10px 0;
					padding: 0 6px;
					margin-left: 5px;
				}
			}
		}

		.info {
			display: flex;
			justify-content: space-between;
			// flex-wrap: wrap;
			margin: 50rpx 0;

			.category {
				display: flex;
				flex-wrap: wrap;
				margin: 0 10rpx;
				width: 20%;
				justify-content: center;
				align-items: center;
				position: relative;
				.img {
					width: 100%;
					display: flex;
					justify-content: center;
					padding: 10rpx;
					border-radius: 25rpx;
					width: 66rpx;
					height: 66rpx;
					align-items: center;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.text {
					margin-top: 16upx;
					display: flex;
					justify-content: center;
					font-size: 22rpx;
					color: #666666;
					width: 100%;
				}
				.new{
					color: #fff;
					    background: #FB6B50;
					    border-radius: 10px;
					    padding: 0 5px;
						font-size: 18rpx;
						line-height: 30rpx;
						height: 30rpx;
						    position: absolute;
						    top: -12rpx;
						    right: 0;
				}
			}
		}
	}

	.notice_top {
		z-index: 99;
		position: relative;
		overflow: hidden;
		margin: 0 auto;
		background: #d8f2f3;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		.notice {
			// background: #f8faff;
			display: flex;
			overflow: hidden;
			align-items: center;
			color: #3CBDC5;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			height: 50rpx;
			border-radius: 4rpx;

			.right {
				display: table-cell;
				vertical-align: middle;
			}

			.tongzhi {
				width: 31rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}

			swiper {
				flex: 1;
				height: 100%;
				position: relative;
				overflow: hidden;
				height: 50rpx;

				.right {
					text-overflow: ellipsis;
					white-space: nowrap;
					display: flex;
					justify-content: space-between;
					overflow: hidden;
					width: 565rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	.actuality {
		background: #fff;
		width: 92%;
		margin: 0 auto 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		text-align: center;

		image {
			border-radius: 20rpx;
			height: 300rpx;
			width: 100%;
		}

		.text {
			position: absolute;
			left: 0;
			top: 0;
			padding: 10rpx;
			z-index: 10;
			text-align: center;
			width: 130rpx;
			color: #fff;
			border-radius: 20rpx;
			font-size: 26rpx;
			border-bottom-left-radius: 0;
			border-top-right-radius: 0;
		}

		.tips {
			position: absolute;
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.4);
			color: #fff;
			font-size: 24rpx;
			padding: 10rpx;
			text-align: left;

		}

		.nr {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				flex: 40%;
				position: relative;
				border-radius: 10rpx;
				height: 160rpx;
				margin: 15rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					display: block;
					position: absolute;
					right: 20rpx;
					top: 31rpx;
					background: #fff;
					padding: 20rpx;
					border-radius: 50%;
				}

				.text {
					position: absolute;
					top: 15rpx;
					left: 20rpx;
					text-align: left;

					text {
						font-size: 26rpx;
						color: #333;
						font-weight: bold;
						display: block;
						margin-bottom: 10rpx;
					}

					.en {
						color: #bfbfbf;
						font-size: 22rpx;
						font-weight: normal;
					}
				}
			}
		}
	}

	.center {
		background: #fff;
		width: 92%;
		margin: 0 auto 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.advantage {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.li {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
				}

				image {
					width: 30rpx;
					height: 23rpx;
					margin-right: 10rpx;
				}
			}

		}

		.navigation {

			width: 100%;


			.left {
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				position: relative;
				display: flex;
				box-sizing: border-box;
				overflow: hidden;
				color: #333;
				align-items: center;
				//height: 366rpx;

				image {
					height: 150rpx;
					width: 150rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
					margin-left: 0;
				}
			}

			.right {
				width: 55%;
				margin-left: 20rpx;
				box-sizing: border-box;

				view.it {
					display: flex;
					padding: 30rpx;
					border-radius: 20rpx;
					justify-content: space-between;
					margin-bottom: 20rpx;
					align-items: center;
				}

				.dgs {
					background: #FFF3F3;
				}

				.gs {
					background: #EDEFFE;
				}
			}

			image {
				height: 70rpx;
				display: block;
				margin-left: 30rpx;
			}

			.bt {
				font-size: 30rpx;
				margin-bottom: 10rpx;
				font-weight: bold;
				display: block;
			}

			.ms {
				font-size: 22rpx;
				display: block;
				color: #bfbfbf;
			}
		}
	}

	.process {
		background: linear-gradient(135deg, #88e6e1, #58c2ca);
		width: 92%;
		margin: 0 auto 90rpx;
		padding: 18rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;

		.title {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 34rpx;
			margin-bottom: 10rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 30rpx;
			}
		}

		.subheading {
			font-size: 24rpx;
			text-align: left;
		}

		.process-img {
			background: #fff;
			margin-bottom: -80rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;

			image {
				height: 100rpx;
			}

			padding-bottom: 20rpx;

			.nr {
				display: flex;
				justify-content: space-between;
				padding: 0 22rpx;

				text {
					font-size: 22rpx;
					color: #000;
				}
			}
		}


	}

	.problem {
		margin: 0 auto;
		width: 92%;
		overflow: hidden;

		.list {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 50rpx;

			.content {
				padding: 0 4% 15px;
				font-size: 28rpx;
				line-height: 45rpx;
				color: #666;

				.text {
					view {
						margin-top: 30rpx;
					}

					p {
						margin-top: 10rpx;
					}
				}
			}

			.uni-collapse,
			.uni-collapse-item__title-box {
				background-color: initial;
			}

			.uni-collapse-item__title-img {
				width: 18px;
				height: 18px;
			}

			.uni-icons.data-v-a2e81f6e {
				color: #2291e0 !important;
				font-weight: bold;
			}

		}

		.partners {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 40rpx;

			image {
				width: 32%;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}
		}


	}

	.right_nav {
		position: fixed;
		bottom: 15%;
		right: 30rpx;
		z-index: 100;

		button {
			margin-bottom: 50rpx;
		}

		image {
			width: 80rpx;
			height: 80rpx;
			display: block;
		}

		image.kefu {
			border-radius: 50%;
		}

		.kefu-text {
			font-size: 20rpx;
			font-weight: bold
		}
	}

	.right_nav1 {
		bottom: 26%;
		text-align: center;
		animation: example 2s infinite linear;

		image {
			margin: 0 auto;

		}

		.kefu-text {
			padding: 10rpx;
			background: #FFC75A;
			color: red;
			border-radius: 25rpx;
		}
	}


	@keyframes example {
		0% {
			transform: translateY(0);
		}

		25% {
			transform: translateY(-10rpx);
		}

		50% {
			transform: translateY(0);
		}

		75% {
			transform: translateY(10rpx);
		}

		100% {
			transform: translateY(0);
		}
	}

	.footer {
		width: 100%;
		padding-bottom: 50rpx;

		text {
			display: block;
			color: #999;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}
</style>